<template>
	<div class="top">
		<div class="nav-bar">
			<span>修改个人信息</span>
		</div>
		<div class="body">
			<el-form label-width="100px" :data="from" style=" margin-top: 10px;margin-left: 60px;" class="form">
				<el-form-item style="margin-left: -150px;margin-top: 10px;"  class="item" prop="img">
					<el-upload   class="avatar-uploader" action :show-file-list="true" :before-upload="beforeAvatarUpload"
						list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img v-if="from.img" width="100%" :src="from.img" alt="" />
					</el-dialog>
				</el-form-item>

				<!-- <el-form-item style="margin-top: 10px;margin-left: -150px;" class="item" prop="shoujianren"> -->
					 
					<!-- <p style="margin-top: -20px;">头像</p> -->
				<!-- </el-form-item> -->


				<el-form-item label="密码:" prop="pwd" class="item">
					<el-input class="put" type="text" v-model="from.pwd"></el-input>
				</el-form-item><el-form-item label="生日:" class="item" prop="shengri">
					<el-input class="put" type="text" v-model="from.shengri"></el-input>
				</el-form-item>

				<el-form-item label="收件号:" class="item" prop="shouhuoshoujihao">
					<el-input class="put" type="text" v-model="from.shouhuoshoujihao"></el-input>
				</el-form-item>

				<el-form-item label="性别:" class="item" prop="xingbie">
					<el-input class="put" type="text" v-model="from.xingbie"></el-input>
				</el-form-item>
				<el-form-item label="用户名:" class="item" prop="yonghuming">
					<el-input class="put" type="text" v-model="from.yonghuming"></el-input>
				</el-form-item>
				<el-form-item label="邮箱:" class="item" prop="youxiang">
					<el-input class="put" type="text" v-model="from.youxiang"></el-input>
				</el-form-item>
				<el-form-item class="item" style="margin-left: -150px;margin-top: 25px;">
					<el-button style="width: 300px
					
									;" class="but" @click="onSubmit()">点击修改</el-button>

				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import httpApi from "@/myaxios/index"
import ObsClient from "esdk-obs-browserjs/src/obs";

export default {
	data() {
		return {
			from: [],
			imageUrl: "",
			initiateData: {
				option: {},
				uploadId: "",
			},
			fileUrl: "",
			dialogImageUrl: "",
			dialogVisible: false,
		}
	},


	methods: {
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		//图片上传
		beforeAvatarUpload(file) {
			const isJPG = file.type === "image/jpeg";
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPG) {
				this.$message.error("上传头像图片只能是 JPG 格式!");
			}
			if (!isLt2M) {
				this.$message.error("上传头像图片大小不能超过 2MB!");
			}
			// return isJPG && isLt2M;
			if (isJPG && isLt2M) {
				var obsClient = new ObsClient({
					access_key_id: "CEQDVNAZTLD4SDTQFCTA", // 你的ak
					secret_access_key: "hr4oEqbvC7R0nW6BgqQKI6fA9a6FznVr4W7nGqLM", // 你的sk
					server: "https://obs.cn-north-4.myhuaweicloud.com", // 你的endPoint  记得加入https://
				});
				obsClient.putObject({
					Bucket: "daoxiangcun", // 桶名
					Key: file.name, // 文件名
					SourceFile: file, //流文件
				});
				this.from.img = `https://daoxiangcun.obs.cn-north-4.myhuaweicloud.com/${file.name}`;
			}
		},


		miMa() {
			let id = this.$route.params.id
			httpApi.GerenZhongxin.miMa({ id }).then(res => {
				console.log('密码', res.data[0])
				this.from = res.data[0]
				console.log(this.from)

			})

		},
		onSubmit() {


			this.$confirm('此操作将修改个人信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				httpApi.GerenZhongxin.xiugai(this.from).then(res => {
					console.log("修改", res.data)
					this.$router.push(`/home/gerenzhongxin/${localStorage.getItem("userId")}/gerenxin`)
				})

				this.$message({
					type: 'success',
					message: '修改成功!'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消修改'
				});
			});







		}
	},
	mounted() {

		//初始化
		this.miMa()
	}

}
</script>


<style lang="scss" scoped>
.nav-bar {
	width: 100%;
	height: 30px;
	background-color: #D3D3D3;
	display: flex;

	>span {
		line-height: 30px;
		margin-left: 20px;
	}
}

.top {
	position: relative;

	.body {
		width: 400px;
		position: absolute;
		left: 40px;
		top: 30px;
		width: 700px;
		height: 570px;
	}

	.item {
		margin-top: -10px;
	}

	.put {
		width: 400px;
		margin-left: -150px;

	}

	.inmg {
		width: 70px;
		height: 70px;
		border-radius: 100%;
		object-fit: cover;

	}

	.but {
		width: 200px;
		border-radius: 20px;
	}
}
</style>
